import React, { PureComponent } from 'react'
import JSONEditor, { JSONEditorOptions } from 'jsoneditor'
import 'jsoneditor/dist/jsoneditor.css'

type JsonEditorProps = {
  value: object,
  title?: string | undefined,
  onChange?: (value:any) => void,
  onError?: (errArr:any) => void|undefined,
  // getJson: (editor:any) => any,
  options?: JSONEditorOptions | undefined,
  schema?: any,
  width?: string|number|undefined;
  height?: string|number|undefined;
}


class JsonEditor extends React.PureComponent<JsonEditorProps> {
  private container = React.createRef<HTMLElement>()?.current;
  private jsoneditor: JSONEditor|undefined = undefined;
  // private schema : any;
  // private schemaRefs: any;

  onChange = async() => {
    var errs = await this.jsoneditor?.validate();
    // console.log("onChange", errs);
    if(errs && errs.length > 0) {
      // this.props.onChange && this.props.onChange(undefined);
      return;
    }
    // console.log(this.jsoneditor?.getText());
    if(this.jsoneditor?.getText()){
      let value = this.jsoneditor?.get()
      //  console.log("onChange", value);
      this.props.onChange && this.props.onChange(value);
    }
    else{
      this.props.onChange && this.props.onChange(undefined);
    }
  }
  // getJson = () => {
  //   this.props.getJson && this.props.getJson(this.jsoneditor?.get())
  // }
  onError = (errArr:any) => {
    this.props.onError && this.props.onError(errArr)
  }
  initJsonEditor = () => {
    const options = {
      mode:'code',
      indentation:4,
      history: true,
      onChange: this.onChange,
      onValidationError: this.onError
    };
    if(this.container){
      // console.log(this.props.options, {...this.props.options, ...options}, {...options, ...this.props.options});
      this.jsoneditor = new JSONEditor(this.container, this.props.options ? {...options, ...this.props.options} : options);
      this.jsoneditor.set(this.props.value)
      if(this.props.schema){
        this.jsoneditor.setSchema(this.props.schema);
        // this.schema = this.props.schema;      
      }
    }
  }
  componentDidMount () {
    this.initJsonEditor()
  }
  componentWillUnmount () {
    // console.log("componentWillUnmount");
    if (this.jsoneditor) {
      this.jsoneditor.destroy();
    }
  }
  componentDidUpdate() {
    // console.log(this.props.value);
    // console.log("componentDidUpdate");    
    if(this.jsoneditor) {
      this.jsoneditor.setSchema(this.props.schema);
      // console.log(this.jsoneditor?.getText());
      // let jsonValue = this.jsoneditor?.get();
      // console.log(jsonValue);
      if(!this.jsoneditor?.getText()){
        this.jsoneditor.update(this.props.value);
      }
    }
  }
  render() {
    return (
      <div className="jsonEditWrap">
        {this.props.title ? <p>{this.props.title}</p> : ''}
        <div 
        className="jsoneditor-react-container" 
        style={{width:this.props.width ?? '100%', height: this.props.height ?? '100%'}} 
        ref={elem => {this.container = elem;}}
        />
      </div>
    );
  }
}

export default JsonEditor